﻿@{
    Layout = "_LayoutAndSidebar";
}

<style>
    .page {
        height: 100%;
        overflow: auto;
        margin-bottom: unset !important;
        box-sizing: border-box;
    }
</style>


<div class="box page">
    <h5 class="title is-5">验证密码</h5>
    <div class="field">
        <p class="control has-icons-left has-icons-right">
            <input class="input" type="email" placeholder="请输入当前密码" id="input_current_password">
            <span class="icon is-small is-left">
                <i class="fa-solid fa-user-lock"></i>
            </span>
        </p>
    </div>

    <div class="notification is-warning">
        <!-- <div class="notification is-success"> -->
        <div class="columns is-vcentered">
            <div class="column">
                <span class="icon">
                    <i class="fa-solid fa-exclamation-triangle"></i>
                    <!-- <i class="fa-solid fa-check"></i> -->
                </span>
                <span>
                    二步验证未开启
                    <!-- 二步验证已开启 -->
                </span>
                <span class="help">二步验证可以为您的账户提供更高的安全性, 但是如果您遗失了二步验证器, 您将无法登录您的账户</span>
            </div>
            <div class="column is-one-fifth has-text-centered" style="width: unset;">
                <button class="button is-warning is-light">开启二步验证</button>
                <!-- <button class="button is-danger is-light">解除二步验证</button> -->
            </div>
        </div>
    </div>


    <h5 class="title is-5">设置新密码</h5>

    <div class="field">
        <p class="control has-icons-left">
            <input class="input" type="password" placeholder="请输入新密码" id="input_new_password">
            <span class="icon is-small is-left">
                <i class="fa-solid fa-lock"></i>
            </span>
        </p>
    </div>

    <div class="field">
        <p class="control has-icons-left">
            <input class="input" type="password" placeholder="再次输入新密码" id="input_new_password_again">
            <span class="icon is-small is-left">
                <i class="fa-solid fa-lock-open"></i>
            </span>
        </p>
    </div>

    <div class="field">
        <p class="control">
            <button class="button is-primary" id="btn_submit">
                确认修改
            </button>
        </p>
    </div>


</div>

<script>
    E_currentPassword = document.getElementById('input_current_password');
    E_newPassword = document.getElementById('input_new_password');
    E_newPasswordAgain = document.getElementById('input_new_password_again');
    E_submit = document.getElementById('btn_submit');

    E_submit.onclick= function(){
        let curPwd = E_currentPassword.value;
        let newPwd = E_newPassword.value;
        let newPwdAgain = E_newPasswordAgain.value;
        if(curPwd == ''){
            alert('请输入当前密码');
            return;
        }
        if(newPwd == ''){
            alert('请输入新密码');
            return;
        }
        if(newPwdAgain == ''){
            alert('请再次输入新密码');
            return;
        }
        if(newPwd != newPwdAgain){
            alert('两次输入的新密码不一致');
            return;
        }
        if(newPwd.length < 6){
            alert('新密码长度不能小于6位');
            return;
        }
        if(newPwd.length > 32){
            alert('新密码长度不能大于32位');
            return;
        }
        E_submit.classList.add('is-loading');
        $.ajax({
            url: '/UserApi/EditPassword',
            type: 'POST',
            data: {
                oldPassword: curPwd,
                newPassword: newPwd
            },
            success: function (res) {
                if (res.code == 0) {
                    alert('修改成功');
                    window.location.href = '/User/Logout';
                } else {
                    alert(res.msg);
                }
            },
            complete: function () {
                E_submit.classList.remove('is-loading');
            }
        });
    }
    
</script>